<template>
  <div class="box">
    <!-- 详览工具栏 -->
    <div class="head">
      <span class="left">{{ queryData.anjianbh }}</span>
      <div class="btn-list">
        <el-button
          class="btn-item"
          icon="el-icon-wallet"
          @click="gotoRelatedpush('/recommend')"
          size="small"
          >相关推送
        </el-button>
        <!-- <el-button
          class="btn-item"
          icon="el-icon-wallet"
          size="small"
          @click="gotoRelatedpush('/derive-low-case')"
          >以案说法
        </el-button> -->
        <el-button
          class="btn-item"
          icon="el-icon-document"
          size="small"
          @click="gotoRelatedpush('/derive-low-case')"
          >案卷浏览
        </el-button>
        <!-- fa fa-thumbs-up 点赞 -->
        <el-button size="small" @click="likeClick"
          ><i
            :class="
              likeInfo.shifouydz ? 'fa fa-thumbs-up' : 'fa fa-thumbs-o-up'
            "
            aria-hidden="true"
            style="margin-right: 8px"
          ></i
          >点赞 ({{ likeInfo.total }})
        </el-button>
        <el-dropdown class="font-family">
          <el-button size="small">
            字体<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="changeFontSize(item.value)"
              v-for="item in fontSizeList"
              :key="item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div
          class="list-icon"
          style="margin-left: 20px; color: #909399; display: inline-block"
        >
          <el-dropdown>
            <i class="fa fa-th-list" aria-hidden="true"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="openMark">详览标注</el-dropdown-item>
              <el-dropdown-item @click.native="expDecFull">导出决定全文</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- 项目导航栏 -->
      <div class="list-nav">
        <div class="item">
          <div class="title">项目导航</div>
          <el-tree
            class="treeDom"
            :data="projectNavigationList"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }">
              <a :href="`#${data.maodian}`" @click="hightMd(data.maodian)">{{
                node.label
              }}</a>
            </span>
          </el-tree>
        </div>
        <div class="item">
          <div class="title">著录项目</div>
          <div class="list" v-if="queryData.dataSource == 'fushen'">
            <div class="list-item">
              <div class="block">
                <div class="top">审查结论：</div>
                <div class="bottom">
                  {{ detailInfo.shenchajl }}
                </div>
              </div>
              <div class="line">
                <div class="left">是否依职权：</div>
                <div class="right">{{ detailInfo.shifouyzq }}</div>
              </div>
              <div class="line">
                <div class="left">是否有口审：</div>
                <div class="right">{{ detailInfo.shifouyks }}</div>
              </div>
              <div class="line">
                <div class="left">是否发还重审：</div>
                <div class="right">{{ detailInfo.shifoufhcs }}</div>
              </div>
            </div>
          </div>
          <div
            class="list"
            v-if="
              queryData.dataSource == 'wuxiao' ||
                queryData.dataSource == 'waiguan'
            "
          >
            <div class="list-item">
              <div class="block">
                <div class="top">审查基础：</div>
                <div class="bottom">
                  {{ detailInfo.shenchajc }}
                </div>
              </div>
              <div class="line">
                <div class="left">是否多合一：</div>
                <div class="right">{{ detailInfo.shifoudhy }}</div>
              </div>
              <div class="line">
                <div class="left">是否依职权：</div>
                <div class="right">{{ detailInfo.shifouyzq }}</div>
              </div>
              <div class="line">
                <div class="left">无效结论：</div>
                <div class="right">{{ detailInfo.shenchajl }}</div>
              </div>
              <div class="line">
                <div class="left">是否发还重审：</div>
                <div class="right">{{ detailInfo.shifoufhcs }}</div>
              </div>
            </div>
          </div>
          <div class="list" v-if="queryData.dataSource == 'susong'">
            <div class="list-item">
              <div class="block">
                <div class="top">审级：</div>
                <div class="bottom">
                  {{ detailInfo.panjuesj }}
                </div>
              </div>
              <div class="line">
                <div class="left">诉讼结果：</div>
                <div class="right">{{ detailInfo.susongjg }}</div>
              </div>
              <div class="block">
                <div class="top">判决结论：</div>
                <div class="bottom">
                  {{ detailInfo.shenchajl }}
                </div>
              </div>
              <div class="line">
                <div class="left">是否为抗诉案件：</div>
                <div class="right">{{ detailInfo.shifouksaj }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 正文 -->
      <div class="main">
        <Carousel v-if="pageType === 'invalidAppearance'" />
        <div
          class="main-top"
          id="article_content"
          v-html="detailInfo.bgqwhtml"
        />

        <div class="main-bottom" id="mainBottom" v-html="detailInfo.xianglannr" />
      </div>
    </div>
     <!-- 添加个人标注 -->
    <mark-outer
      :showVisible.sync="markOuterVisible"
      :parentInfo="listData"
      @closeDialog="closeDialog"
    ></mark-outer>
  </div>
</template>
<script>
import echarts from "echarts";
import Carousel from "./carousel.vue";
import { getInfo, getNumberLikes, cancelLike, addLikes } from "@api/details";
import MarkOuter from "../list/components/markOuter.vue";
import { decision } from "@api/export";

export default {
  components: {
    Carousel,
    MarkOuter
  },
  data() {
    return {
      pageType: "",
      fontSizeList: [
        { label: "小", value: "12px" },
        { label: "中", value: "14px" },
        { label: "大", value: "18px" }
      ],
      likeInfo: {}, // 点赞信息
      /* 项目导航*/
      projectNavigationList: [],
      defaultProps: {
        children: "childrens",
        label: "mingcheng"
      },
      queryData: {},
      /* 详览信息*/
      detailInfo: {},
      mainTopList: [],
      mainBottom: "",
      markOuterVisible: false,
      listData:[]
    };
  },
  created() {
    this.pageType = this.$route.query.pageName;
    this.queryData = JSON.parse(this.$route.query.data);
    console.log(this.queryData);
    this._getInfo();
    this._getNumberLikes();
  },
  mounted() {
    console.log(this.$route.query);
  },
  methods: {
    openMark(){
      this.listData = [
        {
          "anjianbh":this.queryData.anjianbh,
          "anjianlx":'案件类型',
          "juedingh":this.queryData.juedingh,
          "xuanqunr":'选取内容',
        }
      ]
      this.markOuterVisible = true;
    },
    closeDialog() {
      this.markOuterVisible = false;
    },
    // 高亮锚点
    hightMd(id) {
      console.log(id);
      document.getElementById("article_content").style.background = "#ebeef5";
      document.getElementById("mainBottom").style.background = "#fff";
      document.getElementById(id).style.background = "#ffffef";
    },
    /* 获取详览信息*/
    async _getInfo() {
      const {
        data: { xmdh, ...detailInfo }
      } = await getInfo(this.queryData);

      this.projectNavigationList = xmdh;
      this.detailInfo = detailInfo;
      console.log(this.detailInfo);
    },
    /* 获取点赞次数*/
    async _getNumberLikes() {
      const { data } = await getNumberLikes({
        anjianbh: "1",
        juedingh: "1",
        anjianlx: "fushen"
      });
      this.likeInfo = data || {};
    },
    /* 点赞/取消点赞*/
    async likeClick() {
      const requestApi = this.likeInfo.shifouydz ? cancelLike : addLikes;
      const { code } = await requestApi({
        anjianbh: "1",
        juedingh: "1",
        anjianlx: "fushen"
      });
      if (code === 200) this._getNumberLikes();
    },
    async expDecFull(){
      const _this = this
      const _date = _this.queryData
      const params = {
        dataSource:_date.dataSource,
        data:[]
      }
      params.data = {
          anjianbh:_date.anjianbh,
          juedingh:_date.juedingh
        }
      let str =  await decision(params)
      console.log(str) //返回数据
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    /* 改变字体大小*/
    changeFontSize(fontsize) {
      document.getElementById("article_content").style.fontSize = fontsize;
      document.querySelectorAll('td').forEach(item=>{
        item.style.fontSize = fontsize
      })
      document.querySelectorAll('th').forEach(item=>{
        item.style.fontSize = fontsize
      })
    },
    /* 点击相关推送*/
    gotoRelatedpush(val) {
      console.log(this.queryData);
      this.$router.push({
        path: "/pages" + val,
        query: {
          data: JSON.stringify(this.queryData)
        }
      });
    }
  }
};
</script>

<style>
.main-top h3 {
  display: block;
  text-align: center;
}
.main-top table {
  line-height: 26px;
}
.main-top th {
  width: 100px;
  font-size: 14px;
  text-align: right;
  font-weight: normal;
  color: rgb(163, 162, 162);
}
.main-top td {
  padding-left: 20px;
  font-size: 14px;
  text-align: left;
  font-weight: normal;
  color: #333;
  vertical-align: top;
}
.main-bottom p {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 26px;
}
</style>

<style lang="scss" scoped>
.heightText {
  background: #ffffef !important;
}
$font-color: #303113;
$main-color: #303133;
$blue-color: #2d54b8;
>>> h3 {
  font-weight: normal;
}
.box {
  width: 1200px;
  margin: 0 auto;
  font-family: "PingFang SC",
    Microsoft YaHei ",微软雅黑," Microsoft JhengHei ",华文细黑,STHeiti,MingLiu" !important;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;

    .left {
      font-size: 24px;
      color: $font-color;
      font-weight: bolder;
    }

    .btn-list {
      .btn-item {
        &:hover,
        &:focus {
          background-color: $blue-color;
          color: #fff;
        }
      }

      ::v-deep .el-button--small {
        padding: 10px 15px;
        font-size: 14px;
      }

      .font-family {
        margin-left: 10px;
      }

      .list-icon {
        vertical-align: middle;
        color: #909399;
        font-size: 20px;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }

  .content {
    .list-nav {
      width: 270px;
      border: 1px solid #dcdfe6;
      border-left: 6px solid $blue-color;
      background-color: #fff;
      border-radius: 5px;
      overflow: hidden;
      box-sizing: border-box;
      display: inline-block;
      float: left;

      .el-menuList {
        border: none;

        ::v-deep .el-submenu__title {
          height: 50px;
          line-height: 50px;
          padding: 0 13px 0 10px !important;
          background-color: #ebeef5;
          color: #2d54b8;
          font-size: 16px;

          .el-icon-arrow-down {
            &::before {
              color: #2d54b8;
            }
          }
        }

        ::v-deep .el-submenu {
          border-bottom: 1px solid #fff;
          box-sizing: border-box;

          &:last-child {
            border-bottom: none;
          }
        }

        ::v-deep.el-menu-item-group {
          .el-menu-item-group__title {
            padding: 0;
          }

          .el-menu-item {
            height: 46px;
            line-height: 46px;
            box-sizing: border-box;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 !important;
            margin: 0 5px 0 10px;

            &:last-child {
              .line {
                border-bottom: none;
              }
            }

            &:hover,
            &:focus {
              box-sizing: border-box;
              background-color: #fff;

              .line {
                .left {
                  font-weight: 600;
                  color: $blue-color;
                }

                .right {
                  font-weight: 600;
                  color: $blue-color;
                }
              }
            }

            .line {
              cursor: pointer;
              display: flex;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              color: $main-color;
              .left {
                width: 50%;
                overflow: hidden;
                white-space: nowrap;
                text-space: ellipsis;
              }
              .right {
                width: 50%;
                text-align: right;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #909399;
              }
            }
          }
        }
      }

      .item {
        .treeDom {
          ::v-deep .el-tree-node__label {
            font-size: 14px;
            color: $font-color;
          }
        }

        .title {
          height: 50px;
          line-height: 50px;
          padding: 0 13px 0 10px !important;
          background-color: #ebeef5;
          color: #2d54b8;
          font-size: 16px;
        }

        .list {
          margin-left: 10px;

          .list-item {
            .block {
              padding: 15px 5px 15px 0;
              border-bottom: 1px solid #e8e8e8;
              font-size: 14px;

              .top {
                margin-bottom: 10px;
              }

              .bottom {
                line-height: 30px;
                color: #909399;
              }
            }

            &:last-child {
              .line {
                border-bottom: none;
              }
            }

            .line {
              display: flex;
              padding: 15px 5px 15px 0;
              border-bottom: 1px solid #e8e8e8;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              color: $main-color;

              .left {
                width: 50%;
                overflow: hidden;
                white-space: nowrap;
                text-space: ellipsis;
              }
              .right {
                width: 50%;
                text-align: right;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #909399;
              }
            }
          }
        }
      }
    }

    .main {
      float: right;
      display: inline-block;
      width: 900px;
      background-color: #fff;
      border-radius: 5px;
      padding: 20px;
      box-sizing: border-box;

      .main-top {
        background-color: #ebeef5;
        padding: 20px;
        >>> h3 {
          display: block;
          text-align: center;
          color: #2d54b8;
        }
      }

      .main-bottom {
        margin-top: 10px;
      }

      .table-box {
        font-size: 14px;

        table {
          border: 0.5px solid #e8e8e8;
          border-collapse: collapse;
        }

        .table-left {
          background-color: #fcfcfc;
          width: 200px;
          padding: 10px;
          color: #606266;
        }

        .table-right {
          background-color: #fff;
          padding: 10px 15px;
          line-height: 20px;
        }
      }

      .echarts {
        .title {
          color: $font-color;
          font-weight: bolder;
          font-size: 18px;
          margin-bottom: 20px;
        }

        .echarts-head {
          padding: 20px 0;
          box-sizing: border-box;
          background-color: #ebeef5;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 115px;
          margin-bottom: 20px;

          .blue {
            color: #3057b5 !important;
            font-weight: bolder;
          }

          .gray-title {
            color: #606266;
          }

          .gray {
            color: #909399;
          }

          .echarts-head-item {
            min-height: 100%;
            max-height: 100%;
            border-right: 1px solid $blue-color;
            padding: 0 40px;
            box-sizing: border-box;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: space-between;

            &:first-child {
              min-width: 165px;
              padding: 5px 0;
              box-sizing: border-box;
            }

            &:nth-child(2) {
              min-width: 435px;
              max-width: 435px;
            }

            &:last-child {
              min-width: 303px;
              max-width: 303px;
              border-right: none;
            }

            .big-title {
              font-size: 28px;
            }

            .msg {
              font-size: 14px;
            }

            .left {
              margin-right: 40px !important;
            }

            .title-list {
              margin-bottom: 10px;
              font-size: 22px;
              width: 100%;
            }

            .msg-box {
              display: flex;
              flex-wrap: wrap;

              .msg {
                margin-right: 30px;
                margin-bottom: 5px;

                &:nth-child(3n) {
                  margin-right: 0;
                }
              }
            }
          }
        }

        .echarts-body {
          display: flex;
          justify-content: space-between;
          height: 95px;
          margin-bottom: 20px;

          .body-item {
            width: 270px;
            height: 100%;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .body-item-head {
              font-size: 22px;
              color: $blue-color;
              font-weight: bolder;

              .sub {
                font-size: 14px;
              }
            }

            .body-item-foot {
              color: $font-color;
              font-size: 14px;
              margin-top: 10px;
            }
          }
        }

        .echats-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .content-item {
            min-width: calc(50% - 10px);
            margin-bottom: 15px;
            margin-right: 20px;
            height: 351px;

            .content-item-main {
              height: 310px;
              width: 100%;
              border-right: 1px solid #dcdfe6;
            }

            &:nth-child(2n) {
              border-right: none;
              margin-right: 0;

              .content-item-main {
                height: 310px;
                width: 100%;
                border-right: none;
              }
            }

            .content-item-title {
              display: inline-block;
              padding-left: 10px;
              margin-bottom: 20px;
              color: $font-color;
              font-size: 14px;
              border-left: 4px solid $blue-color;
            }
          }
        }
      }
    }
  }
}
</style>
